<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>箱码打包</title>
	</head>
    <link rel="stylesheet" href="css/AllStyle.css" />
    <link rel="stylesheet" href="css/iconfont.css" />
    <script type="text/javascript" src="js/common.js" ></script>
    <script type="text/javascript" src="js/data.js" ></script>
    <script type="text/javascript" src="js/tmpl.js" ></script>
    <script type="text/javascript" src="js/ch.js" ></script>
    <script type="text/javascript" src="js/template.js" ></script>
	<body>
		<!-- 页头 -->
	    <section>
		    <script type="text/javascript">
		        AllPageHeader()
		    </script>
	    </section>
	    
		<!-- 页面-->
    	<section class="AllContent">
    		<div class="ScanBlock" style="padding-bottom: 60px;">
	    		<div class="grid-body" id="cententbody"></div>
	    		<div class="size">当前扫描标签个数：<i> 0 </i>个</div>
    		</div>
    	</section>
    	
	</body>
	<script type="text/javascript" src="js/jquery.min.js" ></script>
	<script type="text/javascript" src="js/mui.min.js" ></script>
	<script type="text/javascript">
	    mui.init();
	    
		$('.AllHeader li:eq(1)').text('箱码打包');
		
		$(function () {
            //语言包渲染
            Template_ini('centent','#cententbody');
            document.addEventListener('deviceready', onDeviceReady, true);
//          $("#pack_no").focus();

        });
        
        mui.plusReady(function(){
		    //扫描器
		    $('.scanimg').click(function(){
		    	var val = $(this).attr("data-val");
		    	 mui.openWindow({
				    url: 'Scanner.html?etk=101&index=tag_pack&type='+val, 
				    id:'Scanner.html'
				});
		    })
		});
		
		//添加refresh自定义事件监听
		window.addEventListener('scan',function(){
			var id = event.detail.id;
			var te = event.detail.type;
			
			if(te == 1){
				$("#pack_no").val(id);
			}else{
				$("#itemNo").val(id);
				proccessTextArea();
			}
		});
		
        //处理外箱编号
        function proccessPackageTextArea(){
            var itemNo=getItemNo($("#pack_no").val());
            $("#pack_no").val(itemNo);
            $("#itemNo").focus();
        }
        //处理商品编号
        function proccessTextArea(){
            var itemNo = getItemNo($("#itemNo").val());
            //$("#packageNo").val(itemNo);
            addItem(itemNo);
            
            var _size = $('#itemList ul').size();
            $('.size').find('i').text(_size);
        }
        function clkAddItem() {
            var itemNo =getItemNo($("#itemNo").val());
            addItem(itemNo);
            var _size = $('#itemList ul').size();
            $('.size').find('i').text(_size);
        }
        function addItem(itemNo) {
            
            var isExit = false;
            $("#itemList ul").each(function() {
                var tmpItemNo = $(this).children("li").get(0).innerHTML;
                if (tmpItemNo === itemNo) {
                    alert("标签已经存在：[" + itemNo + "]");
                    isExit = true;
                }
            });
            if (isExit === false) {
                getPackageItem(itemNo);
            }
            $("#itemNo").val("");
            $("#itemNo").focus();
        }
        function getPackageItem(itemNo) {
            var tr = "<ul><li>" + itemNo + "</li><li onClick='rmItem(this)'><a href='#'>删除</a></li></ul>";
            $("#itemList").append(tr);
            return true;
        }


        function rmItem(k) {
            $(k).parent().remove();
            var _size = $('#itemList ul').size();
            $('.size').find('i').text(_size);
        }
        function onDeviceReady() {
            document.addEventListener("backbutton", onBackKeyDown, false);
        }
        function onBackKeyDown() {
            openUrl("index.html");
        }

        function finishPackage() {
            var pckg = $("#pack_no").val();
            var num = $("#pack_num").val();
            var total_num = parseInt($('#itemList ul').size());
            if (empty(num)) {
                alert("商品预设数量不能为空！");
                return false;
            }
            if(num != total_num){
                alert("已添加数量与商品预设数量不一致！");
                return false;
            }
            if (empty(pckg)) {
                alert("箱码编号不能为空！");
                return false;
            } else {
                var itemCount = $("#itemList").children("ul").length;
                if (itemCount < 1) {
                     alert("箱码内商品不能为空！");
                } else {
                    var itemList = "";
                    $("#itemList ul").each(function() {
                        var tmpItemNo = $(this).children("li").get(0).innerHTML;
                        if (itemList === "") {
                            itemList = tmpItemNo;
                        } else {
                            itemList = itemList + "," + tmpItemNo;
                        }
                    });

                    if (itemList !== "") {
                        $.ajax({
                            type: 'post',
                            datatype: 'json',
                            url: getServerUrl() + "/Open/Comtag/tag_pack",
                            data: {pckg: pckg, itemList: itemList,access_token:getToken()},
                            error: function() {
                                alert(L('tag_pack_pack_fail')+"[" + msg.error_description + "]");
                            },
                            success: function(msg) {
                                if (msg.result == 1) {
                                    $("#packageNo").val("");
                                    $("#itemList").html("");
                                    $('#pack_no').val("");
                                    alert(L('tag_pack_pack_success'));
                                } else {
                                    alert(L('tag_pack_pack_fail')+"[" + msg.error_description + "]");
                                }
                            }
                        });
                    }

                }
            }
        }
	</script>
	<script type="text/html" id="centent">
		<div class="ScanBlock">
	    	<form>
	    		<div class="unilineframe relative">
	    			<input id="pack_num" type="number" name="pack_num" placeholder="商品预设数量" />
	    		</div>
	    		<div class="unilineframe relative">
	    			<img class="scanimg" data-val="1" src="images/scan_01.png">
	    			<input id="pack_no" type="text" onkeypress="if (event.keyCode == 13) { proccessPackageTextArea(); return false;}" name="pack_no" placeholder="箱码编号" />
	    		</div>
	    		<div class="ScanInput">
					<p class="relative">
						<img class="scanimg" data-val="2" src="images/scan_01.png">
						<input id="itemNo" class="bg-focus form-control" type="text" onkeypress="if (event.keyCode == 13) { proccessTextArea(); return false; }" name="itemNo" placeholder="标签编码">
					</p>
					<p><button type="button" style="font-size:0.9em" onclick="clkAddItem();">添加标签</button></p>
				</div>
			</form>
			
			<!-- 信息 -->
			<div class="dataNav">
				<ul>
					<li>标签编号</li>
					<li>操作</li>
				</ul>
			</div>
			
			<div id="itemList"></div>
		</div>
        <a class="btn" id="startButton" onclick="finishPackage();">完成打包</a>
	</script>
</html>
